<template>                                 
  <!-- <a-button class="editable-add-btn" style="margin-bottom: 8px" @click="handleAdd">Add</a-button> -->
  
  <!-- 项目信息表 -->
  <div style="width:33%;float:left">
  <a-table bordered :data-source="dataSource1" :columns="columns" :pagination="false" >
    <template #bodyCell="{ column, text, record ,index}">
      <template v-if="column.dataIndex === 'paravalue'">
        <div class="editable-cell">
          <div v-if="editableData1[record.key]" class="editable-cell-input-wrapper">
            <a-input v-model:value="editableData1[record.key].paravalue" @pressEnter="save1(record.key)" />
            <check-outlined class="editable-cell-icon-check" @click="save1(record.key)" />
          </div>
          <div v-else class="editable-cell-text-wrapper">
            {{ text || ' ' }}
            <edit-outlined class="editable-cell-icon" @click="edit1(record.key)" />
          </div>
        </div>
      </template>
      <!-- <template v-else-if="column.dataIndex === 'operation'">
        <a-popconfirm
          v-if="dataSource.length"
          title="Sure to delete?"
          @confirm="onDelete(record.key)"
        >
          <a>待定</a>
        </a-popconfirm>
      </template> -->
    </template>
    <template #title>项目信息表</template>
    <!-- <template #footer>页脚</template> -->
  </a-table>
  </div>

  <!-- 装机进度表 -->
  <div style="width:33%;float:left">
  <a-table bordered :data-source="dataSource2" :columns="columns" :pagination="false">
    <template #bodyCell="{ column, text, record ,index}">
      <template v-if="column.dataIndex === 'paravalue'">
        <div class="editable-cell">
          <div v-if="editableData2[record.key]" class="editable-cell-input-wrapper">
            <a-input v-model:value="editableData2[record.key].paravalue" @pressEnter="save2(record.key)" />
            <check-outlined class="editable-cell-icon-check" @click="save2(record.key)" />
          </div>
          <div v-else class="editable-cell-text-wrapper">
            {{ text || ' ' }}
            <edit-outlined class="editable-cell-icon" @click="edit2(record.key)" />
          </div>
        </div>
      </template>
    </template>
    <template #title>装机进度表</template>
    <!-- <template #footer>页脚</template> -->
  </a-table>
</div>

  <!-- 分年度投资表 -->
  <div style="width:33%;float:left">
  <a-table bordered :data-source="dataSource3" :columns="columns" :pagination="false">
    <template #bodyCell="{ column, text, record ,index}">
      <template v-if="column.dataIndex === 'paravalue'">
        <div class="editable-cell">
          <div v-if="editableData3[record.key]" class="editable-cell-input-wrapper">
            <a-input v-model:value="editableData3[record.key].paravalue" @pressEnter="save3(record.key)" />
            <check-outlined class="editable-cell-icon-check" @click="save3(record.key)" />
          </div>
          <div v-else class="editable-cell-text-wrapper">
            {{ text || ' ' }}
            <edit-outlined class="editable-cell-icon" @click="edit3(record.key)" />
          </div>
        </div>
      </template>
    </template>
    <template #title>分年度投资表(此表动态变化)</template>
    <!-- <template #footer>页脚</template> -->
  </a-table>
</div>
</template>
<script lang="ts">
import { computed, defineComponent, reactive, ref } from 'vue';
import type { Ref, UnwrapRef } from 'vue';
import { CheckOutlined, EditOutlined } from '@ant-design/icons-vue';
import { cloneDeep } from 'lodash-es';

interface DataItem {
  key: string;
  paraname: string;
  paravalue: string;
}

export default defineComponent({
  components: {
    CheckOutlined,
    EditOutlined,
  },
  setup() {
    const columns = [
      {
        title: '参数名',
        dataIndex: 'paraname',
        width: '50%',
      },
      {
        title: '参数值',
        dataIndex: 'paravalue',
      },
      // {
      //   title: '操作',
      //   dataIndex: 'operation',
      // },
    ];

// 项目信息表------start----------
    const dataSource1: Ref<DataItem[]> = ref([
      {
        key: '0',
        paraname: '计算期(年)',
        paravalue: '26'
      },
      {
        key: '1',
        paraname: '参数期(年)',
        paravalue: '1',
      },
      {
        key: '2',
        paraname: '光伏系统容量(MW)',
        paravalue: '50',
      },
      {
        key: '3',
        paraname: '建设期起始年',
        paravalue: '2022',
      },
      {
        key: '4',
        paraname: '建设期起月',
        paravalue: '1',
      },
      {
        key: '5',
        paraname: '第一年施工月数',
        paravalue: '12',
      },
      {
        key: '6',
        paraname: '最后一年施工月数',
        paravalue: '12',
      },
      {
        key: '7',
        paraname: '储能额定功率(MW)',
        paravalue: '1',
      },
      {
        key: '8',
        paraname: '储能容量(MWh)',
        paravalue: '5',
      },
      {
        key: '9',
        paraname: '资本金基准收益率(%)',
        paravalue: '8',
      },
      {
        key: '10',
        paraname: '行业基准收益率(所得税前)(%)',
        paravalue: '8',
      },
      {
        key: '11',
        paraname: '行业基准收益率(所得税后)(%)',
        paravalue: '7',
      }
    ]);
    const count1 = computed(() => dataSource1.value.length + 1);
    const editableData1: UnwrapRef<Record<string, DataItem>> = reactive({});

    const edit1 = (key: string) => {
      editableData1[key] = cloneDeep(dataSource1.value.filter(item => key === item.key)[0]);
    };
    const save1 = (key: string) => {
      Object.assign(dataSource1.value.filter(item => key === item.key)[0], editableData1[key]);
      delete editableData1[key];
    };
    // const onDelete = (key: string) => {
    //   dataSource.value = dataSource.value.filter(item => item.key !== key);
    // };
    // const handleAdd = () => {
    //   const newData = {
    //     key: `${count.value}`,
    //     paraname: `Edward King ${count.value}`,
    //     paravalue: 32,
    //   };
    //   dataSource.value.push(newData);
    // };
// 项目信息表------end----------

//  装机进度表---------start----------
    const dataSource2: Ref<DataItem[]> = ref([
      {
        key: '0',
        paraname: '一月装机(MW)',
        paravalue: '26',
      },
      {
        key: '1',
        paraname: '二月装机(MW)',
        paravalue: '1',
      },
      {
        key: '2',
        paraname: '三月装机(MW)',
        paravalue: '50',
      },
      {
        key: '3',
        paraname: '四月装机(MW)',
        paravalue: '2022',
      },
      {
        key: '4',
        paraname: '五月装机(MW)',
        paravalue: '1',
      },
      {
        key: '5',
        paraname: '六月装机(MW)',
        paravalue: '12',
      },
      {
        key: '6',
        paraname: '七月装机(MW)',
        paravalue: '12',
      },
      {
        key: '7',
        paraname: '八月装机(MW)',
        paravalue: '1',
      },
      {
        key: '8',
        paraname: '九月装机(MW)',
        paravalue: '5',
      },
      {
        key: '9',
        paraname: '十月装机(MW)',
        paravalue: '8',
      },
      {
        key: '10',
        paraname: '十一月装机(MW)',
        paravalue: '8',
      },
      {
        key: '11',
        paraname: '十二月装机(MW)',
        paravalue: '50',
      }
    ]);
    const count2 = computed(() => dataSource2.value.length + 1);
    const editableData2: UnwrapRef<Record<string, DataItem>> = reactive({});

    const edit2 = (key: string) => {
      editableData2[key] = cloneDeep(dataSource2.value.filter(item => key === item.key)[0]);
    };
    const save2 = (key: string) => {
      Object.assign(dataSource2.value.filter(item => key === item.key)[0], editableData2[key]);
      delete editableData2[key];
    };
//装机进度表-----------end-----------

//分年度投资表---------start---------
    const dataSource3: Ref<DataItem[]> = ref([
      {
        key: '0',
        paraname: '资本金投入方式',
        paravalue: '按比例/金额投入'
      },
      {
        key: '1',
        paraname: '资本金占动动态/静态投资比例',
        paravalue: '1',
      },
      {
        key: '2',
        paraname: '建设期利息计算方式',
        paravalue: '手动/自动',
      },
      {
        key: '4',
        paraname: '',
        paravalue: '第一年',
      },
      {
        key: '5',
        paraname: '分年度投资(万元)',
        paravalue: '20000',
      },
      {
        key: '6',
        paraname: '其中：无形资产(万元)',
        paravalue: '0',
      },
      {
        key: '7',
        paraname: '其中：其他资产(万元)',
        paravalue: '0',
      },
      {
        key: '8',
        paraname: '其中：可抵扣税金(万元)',
        paravalue: '2000',
      },
      {
        key: '9',
        paraname: '光伏系统占总固定资产比例(%)',
        paravalue: '8',
      },
      {
        key: '10',
        paraname: '资本金分配比例(%)',
        paravalue: '8',
      },
      {
        key: '11',
        paraname: '建设期利息(%)',
        paravalue: '7',
      }
    ]);
    const count3 = computed(() => dataSource3.value.length + 1);
    const editableData3: UnwrapRef<Record<string, DataItem>> = reactive({});   //editableData3和1，2是一样的

    const edit3 = (key: string) => {
      editableData3[key] = cloneDeep(dataSource3.value.filter(item => key === item.key)[0]);
    };
    const save3 = (key: string) => {
      Object.assign(dataSource3.value.filter(item => key === item.key)[0], editableData3[key]);
      delete editableData3[key];
    };
//分年度投资表---------end---------
    return {
      columns,
      // onDelete,
      // handleAdd,
      dataSource1,
      dataSource2,
      dataSource3,
      editableData1,
      editableData2,
      editableData3,
      count1,
      count2,
      count3,
      edit1,
      edit2,
      edit3,
      save1,
      save2,
      save3,
    };
  },
});
</script>
<style lang="less">
.editable-cell {
  position: relative;
  .editable-cell-input-wrapper,
  .editable-cell-text-wrapper {
    padding-right: 24px;
  }

  .editable-cell-text-wrapper {
    padding: 5px 24px 5px 5px;
  }

  .editable-cell-icon,
  .editable-cell-icon-check {
    position: absolute;
    right: 0;
    width: 20px;
    cursor: pointer;
  }

  .editable-cell-icon {
    margin-top: 4px;
    display: none;
  }

  .editable-cell-icon-check {
    line-height: 28px;
  }

  .editable-cell-icon:hover,
  .editable-cell-icon-check:hover {
    color: #108ee9;
  }

  .editable-add-btn {
    margin-bottom: 8px;
  }
}
.editable-cell:hover .editable-cell-icon {
  display: inline-block;
}
</style>
